<template>
    <div>
        <el-card class="box-card">
            <mytitle :showLine="false">认养管理</mytitle>
            <el-table ref="singleTable" v-loading="loading" :header-cell-style="{ color: '#292B2B', background: '#EAF9F4' }" :data="tableData"
                highlight-current-row @current-change="handleCurrentChange" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="tenancyId" label="认养编号" width="220" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="认养人/联系方式" width="180" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.fosterName }}/{{ scope.row.fosterPhone }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="fosterTime" label="认养时间" width="180" align="center">
                </el-table-column>
                <el-table-column prop="fosterExpireTime" label="到期时间" width="180" align="center">
                </el-table-column>
                <el-table-column prop="tenancyNum" label="认养数量" width="100" align="center">
                </el-table-column>
                <el-table-column prop="tenancyDuration" label="认养时间" width="120" align="center">
                </el-table-column>
                <el-table-column prop="rent" label="认养租金" width="120" align="center">
                </el-table-column>
                <el-table-column label="是否有采收" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.whetherRecovery ? 'success' : 'danger'">{{ scope.row.whetherRecovery ? '有采收' : '无采收' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作"  fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="checkRow(scope.row)" type="text" >查看</el-button>
                        <el-button @click="toPost(scope.row)" type="text" 
                            v-if="scope.row.whetherRecovery">邮寄产出物</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="info.pageNum"
                :page-size="info.pageSize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog :visible.sync="dialogVisible" width="60%">
            <el-dialog width="30%" :visible.sync="innerVisible" :append-to-body="true">
                <div slot="title"><mytitle>邮寄产出物</mytitle></div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <div class="lineTitle">收货人信息</div>
                        <div style="width: 80%;margin: 0 auto;">
                            <el-form-item label="收货人名字：">
                                <el-input v-model="personInfo.userName" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码：">
                                <el-input v-model="personInfo.phone" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="收货地址：" >
                                <el-input type="textarea" :rows="2" v-model="personInfo.site" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="lineTitle">快递信息</div>
                            <div style="width: 80%;margin: 0 auto;">
                                <el-form-item label="采收批次：" prop="logistics">
                                    <el-select v-model="ruleForm.outputGoodsId" placeholder="请选择批次号" @visible-change="varietyChange">
                                        <el-option
                                        v-for="item in coveryselect"
                                        :key="item.value"
                                        :label="item.outputGoods"
                                        :value="item.outputGoodsId">
                                        <span style="float: left">{{ item.outputGoods }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.outputGoodsNum }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="快递公司：" prop="logistics">
                                    <el-input v-model="ruleForm.logistics"></el-input>
                                </el-form-item>
                                <el-form-item label="快递单号：" prop="logisticsNo">
                                    <el-input v-model="ruleForm.logisticsNo"></el-input>
                                </el-form-item>
                            </div>
                        <el-form-item style="text-align: center;" label-width="0px">
                            <el-button  @click="submitForm('ruleForm')" type="success" >提交</el-button> 
                        </el-form-item>
                    </el-form>
            </el-dialog>
            <el-dialog width="30%" :visible.sync="information" :append-to-body="true">
                <div slot="title"><mytitle>物流信息</mytitle></div>
                <div style="padding-left: 30px;">
                   已发货批次 ：<el-select v-model="checkInfo.outputGoodsId"  placeholder="请选择批次号" @visible-change="varietyChange" @change="checkgisticsNo">
                            <el-option
                            v-for="item in coveryselect"
                            :key="item.value"
                            :label="item.outputGoods"
                            :value="item.outputGoodsId">
                            <span style="float: left">{{ item.outputGoods }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.outputGoodsNum }}</span>
                            </el-option>
                    </el-select>
                </div>
                 <div>
                    <div style="padding: 20px;">{{staffData.com}}</div>
                    <div style="padding: 20px;">{{staffData.data.nu }}</div>
                    <el-timeline style="width: 100%;padding: 20px;">
                    <el-timeline-item v-for="(item,index) in staffData.data.data" :timestamp="item.ftime" :key="index" placement="top" color="#17CC77"  >
                    <div class="timestamp-item">
                        <h4>{{item.context}}</h4>
                    </div>
                    </el-timeline-item>
                    </el-timeline>
                 </div>  
                 
            </el-dialog>
            <div slot="title"><mytitle>产出物</mytitle></div>
            <div style="width: 80%;margin: 0 auto;">
                地块名称：
                <el-select v-model="landInfo.landId" placeholder="请选择" @change="landselect">
                    <el-option v-for="item in showlands" :key="item.landId" :label="item.landName" :value="item.landId">
                    </el-option>
                </el-select>
            </div>
            <el-table ref="singleTable" :data="fruitData" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" highlight-current-row @current-change="handleCurrentChange" border
            v-loading="loading1" style="width: 80%;margin:30px auto;">
                <el-table-column prop="variety" label="品种名称" align="center">
                </el-table-column>
                <el-table-column prop="plantArea" label="种植面积" align="center">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="mailTo(scope.row)" type="text" >发货</el-button>
                        <el-button @click="getlogisticsNo(scope.row)" type="text" >查看物流</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { findAllTenancyMessage, findTenancyByTenancyIdAndLandId,findAddressById,deliverGoods,queryTrack,findGoodsByLandMsgId } from '../util/api.js'
export default {
    data() {
        return {
            loading:true,
            loading1:true,
            dialogVisible: false,
            innerVisible: false,
            information:false,
            tableData: [],
            showlands: [],
            info:{
                pageNum:1,
                pageSize:6
            },
            total:0,
            staffData:{data:{data:[]}},
            ruleForm: {
                landMsgId:'',
                logistics:"",
                logisticsNo:"",
                outputGoodsId:""
            },
            outputInfo:{
                landMsgId:"",
                state:0,
            },
            checkInfo:{
                outputGoodsId:""
            },
            coveryselect:[],
            personInfo:{

            },
            rules: {
                outputGoodsId: [
                    { required: true, message: '请选择采收批次', trigger: 'change' },
                ],
                logistics: [
                    { required: true, message: '请选择快递公司', trigger: 'blur' },
                ],
                logisticsNo:[
                    { required: true, message: '请输入快递单号', trigger: 'blur' },
                ]
            },
            currentRow: null,
            landInfo: {
                landId: "",
                tenancyId: ""
            },
            fruitData: [],
        }
    },
    mounted() {
        this.findAllTenancyMessage()
    },
    methods: {
        async findAllTenancyMessage() {
            let res = await findAllTenancyMessage(this.info)
            this.loading=false
            // console.log(res)
            if (res.code != 200) return 
            this.tableData = res.data.rows
            this.total = res.data.total
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        //邮寄1
        toPost(row) {
            // console.log(row)
            this.showlands = row.landS
            this.landInfo.tenancyId = row.tenancyId
            this.landInfo.landId = JSON.parse(JSON.stringify(row.landS[0].landId))
            this.getFruit()
            this.dialogVisible = true
        },
        //物流信息
       async getInfomation(id){
         let res =  await queryTrack()
        },
        //打开查看物流
        getlogisticsNo(row){
            console.log(row)
            this.outputInfo.state = 1
            this.outputInfo.landMsgId = row.landMsgId
            //查看单个批次物流
            this.information =true
        }, 
        async checkgisticsNo(){
            let res =  await queryTrack(this.checkInfo)
            // console.log(res)
            if(res.code!=200)return this.$message.error(res.msg)
            this.staffData = res.data
        },
        async getFruit() {
            let res = await findTenancyByTenancyIdAndLandId(this.landInfo)
            // console.log(res)
            if (res.code != 200) return
            this.fruitData = res.data.landDetails
            this.loading1=false
        },
        landselect() {
            this.loading1 =true
            this.getFruit()
        },
        // 查看
        checkRow(row) {
            this.$router.push({
                name:"fosterManagementExamine",
                query:{
                    data:encodeURIComponent(JSON.stringify(row))
                },
            })
        },
        async findData(){
             let res= await findGoodsByLandMsgId(this.outputInfo)
             console.log(res)
             if(res.code!=200)return 
             this.coveryselect = res.data
        },
        //获取采收批次
        varietyChange(val) {
            if (val) this.findData()
         },
        //发货
        mailTo(row) {
            // console.log(row)
            if(row.addressId==null)return this.$message.info('请在小程序填写收货人信息')
            this.ruleForm.landMsgId = row.landMsgId
            this.getRecord(row.addressId)
            
        },
        //获取收获人信息
       async getRecord(addressId){
             let res = await findAddressById({addressId})
             if(res.code!=200)return this.$message.error('请在小程序填写收货人信息')
             this.personInfo = res.data
             this.outputInfo.state = 0 //修改批次状态
             this.innerVisible = true
             
        },
        //确定发货
        submitForm(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    let res = await deliverGoods(this.ruleForm)
                    if(res.code!=200)return
                    this.$message.success('发货成功')
                    this.innerVisible = false
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 14px 0;
}
.lineTitle{
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 400;
    color: #01B780;
    background: rgba(1,183,128,0.08);
    text-align: center;
    margin-bottom: 20px;
}
/deep/.el-input__inner{
    background-color: #FAFAFA!important;
}
/deep/.el-textarea__inner{
    background-color: #FAFAFA!important;
}
/deep/.el-dialog__body{
    padding: 0!important;
    padding-bottom: 20px!important;
}
</style>